<template>
  <a-menu>
    <template v-for="(menu, index) in menus">
      <a-menu-item v-if="!menu.children" :key="index">
        <div :style="sideBarHoverMenuItemWrapperStyle">
          <div :style="sideBarHoverMenuItemStyle">
            <div :style="sideBarHoverMenuItemHeaderWrapperStyle">
              <div :style="sideBarHoverMenuItemHeaderStyle">
                <icon-font type="icon-symbol-add" />
              </div>
            </div>
            <div :style="sideBarHoverMenuItemNameWrapperStyle">
              <div :style="sideBarHoverMenuItemNameStyle">{{ menu.title }}</div>
            </div>
          </div>
        </div>
      </a-menu-item>
      <a-sub-menu v-else :key="`sub-${index}`">
        <template #title>
          <div :style="sideBarHoverMenuItemWrapperStyle">
            <div :style="sideBarHoverMenuItemStyle">
              <div :style="sideBarHoverMenuItemHeaderWrapperStyle">
                <div :style="sideBarHoverMenuItemHeaderStyle">
                  <icon-font :type="menu.icon" />
                </div>
              </div>
              <div :style="sideBarHoverMenuItemNameWrapperStyle">
                <div :style="sideBarHoverMenuItemNameStyle">{{ menu.title }}</div>
              </div>
            </div>
          </div>
        </template>
        <a-menu-item
          v-for="(subMenu, index2) in menu.children"
          :key="`${index}-${index2}`"
          :style="sideBarHoverSubMenuStyle"
          @click="subMenu.operation"
        >
          {{ subMenu.title }}
        </a-menu-item>
      </a-sub-menu>
    </template>
  </a-menu>
</template>

<script lang="ts" setup>
import { useHoverMenu } from './style-hover-menu';
import { IconFont } from '@/components/icon-font';
import { useTopLevelOperationStore } from '@/plugins/pinia/store/top-level-operation';
import { ROOT_NOTE_KEY, useNodeTreeCacheStore } from '@/plugins/pinia/store/node-tree-cache';
import { DataNode } from 'ant-design-vue/es/tree';

const topLevelOperationStore = useTopLevelOperationStore();
const nodeTreeCacheStore = useNodeTreeCacheStore();

const props = defineProps({
  /**
   * 弹出菜单对应的节点 Key
   */
  nodeKey: {
    type: String,
    required: true,
  },
});
const { nodeKey } = toRefs(props);

const currentNodeType = computed(() => {
  if (nodeKey.value == ROOT_NOTE_KEY) {
    return 'TOP';
  }
  return nodeTreeCacheStore.keyNodeMap[nodeKey.value].type;
});

const openNewLarkNote = () => {
  topLevelOperationStore.openNewLarkNote(nodeKey.value);
};

/**
 * 根据节点类型，展示不同的弹出菜单
 */
const menus = computed((): Array<DataNode> => {
  switch (currentNodeType.value) {
    case 'LARK_DOCUMENT':
    case 'LARK_FOLDER':
      return [{ key: 'delete', title: '删除' }];
    case 'NORMAL':
    case 'TOP':
      return [
        {
          key: 'new',
          title: '新建',
          icon: 'icon-symbol-add',
          children: [
            {
              key: 'newLark',
              title: '新建飞书同步笔记',
              operation: openNewLarkNote,
            },
          ],
        },
      ];
    default:
      return [];
  }
});

const {
  sideBarHoverMenuItemWrapperStyle,
  sideBarHoverMenuItemStyle,
  sideBarHoverMenuItemHeaderWrapperStyle,
  sideBarHoverMenuItemHeaderStyle,
  sideBarHoverMenuItemNameWrapperStyle,
  sideBarHoverMenuItemNameStyle,
  sideBarHoverSubMenuStyle,
} = useHoverMenu();
</script>
